<style scoped lang="scss">
html,
body,
#app {
    width: 100%;
    height: 100%;
    background: #f4f6fa;
}

header {
    display: flex;

    .van-nav-bar {
        width: .2rem;
        background: #fff;
    }

    .van-search {
        // width: 1rem;
        flex: 1;
        ;
        margin-left: .2rem;
        border-radius: .5rem;
    }
}

.h3 {
    width: 100%;
    height: 0.3rem;
    background: #f4f6fa;
    display: flex;
    justify-content: space-between;
}

main {
    width: 100%;
    height: 5.65rem;
    background: #f4f6fa;
    overflow: hidden;
    .main2 {
        width: 100%;
        height: 5rem;
        background: #f4f6fa;
        overflow-y: none;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;

        .main2-1 {
            width: 3rem;
            height: 4.8rem;
            background-image: linear-gradient(to bottom, #ffebdb, #f4f6fa);
            display: inline-block;
            margin-right: 10px;
            margin-top: .15rem;
            border-radius: .5rem;
            position: relative;

            table {
                width: 2.8rem;
                background: white;
                // background-image: linear-gradient(to bottom, white, #f4f6fa);
                height: 4.5rem;
                position: relative;
                top: .1rem;
                left: .1rem;
                border-radius: .5rem;
                padding: .2rem;

                tr,
                td {
                    text-align: left;

                    img {
                        width: .4rem;
                        height: .4rem;
                    }
                }
            }
        }

        .main2-2 {
            width: 3rem;
            height: 4.8rem;
            background-image: linear-gradient(to bottom, #dcecff, #f4f6fa);
            display: inline-block;
            margin-right: 10px;
            margin-top: .3rem;
            border-radius: .5rem;

            table {
                width: 2.8rem;
                background: white;
                // background-image: linear-gradient(to bottom, white, #f4f6fa);
                height: 4.5rem;
                position: relative;
                top: .1rem;
                left: .1rem;
                border-radius: .5rem;
                padding: .2rem;

                tr,
                td {
                    img {
                        width: .4rem;
                        height: .4rem;
                    }
                }
            }
        }

        .main2-3 {
            width: 3rem;
            height: 4.8rem;
            background-image: linear-gradient(to bottom, #d1f6dc, #f4f6fa);
            display: inline-block;
            margin-right: 10px;
            margin-top: .15rem;
            border-radius: .5rem;

            table {
                width: 2.8rem;
                background: white;
                // background-image: linear-gradient(to bottom, white, #f4f6fa);
                height: 4.5rem;
                position: relative;
                top: .1rem;
                left: .03rem;
                border-radius: .5rem;
                padding: .2rem;

                tr,
                td {
                    img {
                        width: .4rem;
                        height: .4rem;
                    }
                }
            }
        }
    }
}
</style>
<template>
    <div class="search">
        <header>
            <van-nav-bar class="van-nav-bar" left-arrow @click-left="onClickLeft" />
            <van-search class="van-search" @click="JumpInterrogationSearch" v-model="value" placeholder="请输入搜索关键词" />
        </header>

        <main>
            <div class="main2">
                <div class="main2-1">
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <img src="../img/精神心理.png" alt="">
                                </td>
                                <td>精神心里/学习困难会诊</td>
                            </tr>
                            <tr>
                                <td><img src="../img/舌下脱敏治疗.png" alt=""></td>
                                <td>舌下脱敏治疗</td>
                            </tr>
                            <tr>
                                <td><img src="../img/我要导诊.png" alt=""></td>
                                <td>我要导诊</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>名医在线:守护家庭健康</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>耳鼻咽喉</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>湿疹</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>中医调理</td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>抑郁症</td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>结直肠癌</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>专家号源提醒</td>
                            </tr>

                        </tbody>
                    </table>
                </div>
                <div class="main2-2">
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <img src="../img/何怡发.png" alt="">
                                </td>
                                <td>何怡发限时义诊</td>
                            </tr>
                            <tr>
                                <td><img src="../img/李慧亮.png" alt=""></td>
                                <td>李慧亮限时义诊</td>
                            </tr>
                            <tr>
                                <td><img src="../img/叶青.png" alt=""></td>
                                <td>叶青限时义诊</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>王朵勤主治医师 皮肤科</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>秦宇 主治医师 妇科</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>汤正义 主任医师 内分泌科</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>李心翔 主任医师 大肠外科</td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>黄韬 主任医师 中医科</td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>龚凌云副主任医师 神经内科</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>林国文副主任医师 泌尿外科</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="main2-3">
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <img src="../img/复旦大学1.png" alt="">
                                </td>
                                <td>复旦大学附属中山医院</td>
                            </tr>
                            <tr>
                                <td><img src="../img/复旦大学2.png" alt=""></td>
                                <td>复旦大学附属华山医院</td>
                            </tr>
                            <tr>
                                <td><img src="../img/复旦大学3.png" alt=""></td>
                                <td>复旦大学附属眼耳鼻喉科医院</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>上海交通大学医学院附属</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>上海中医药大学附属曙光</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>上海长海医院</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>上海中医药大学附属龙华</td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>上海交通大学医学院附属</td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>上海交通大学医学院附属</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>上海儿童医学中心</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </main>
    </div>
</template>
<script lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
export default {
    setup() {
        const onClickLeft = () => history.back();
        const value = ref('');
        const router = useRouter();
        const JumpInterrogationSearch = () => {
            router.push('/interrogationSearch');
        }
        return {
            onClickLeft,
            value,
            JumpInterrogationSearch
        };
    },
};

</script>